<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref, provide } from "vue"
import { storeToRefs } from "pinia";
import userChartShowState from "../../../store/chartExample";
import { requestLastWeekSongList, requestUserSongList } from "../../../utils/axiosURL";
import useSongURLStore from "../../../store/songURL";

const songURLStore = useSongURLStore()
const { state, listenCount, userID } = storeToRefs(userChartShowState())
const route = useRoute()
const userIDs = ref<any>(route.query.id)
// 存储用户歌单数据
let userListenCount = reactive<any>([])
// noAuthority 无权限
let noAuthority = ref<boolean>(false)
// noAuthority2 无权限
let noAuthority2 = ref<number>(0)
// 用户无数据
let userNoData = ref<boolean>(false)
// 存储近一周数据
let lastWeekData = reactive<any>([])
provide("songData", userListenCount.values)

// 用户歌单数据
const requestUserSongListFn = () => {
  requestUserSongList(userIDs.value).then((data: any) => {
    if (!data.playlist.length) return noAuthority.value = true
    userListenCount.values = data.playlist
  }).catch(_ => { })
}
// 用户最近一周的听歌排行
const requestLastWeekSongListFn = () => {
  requestLastWeekSongList(userID.value, 1).then((data: any) => {
    if (!data.weekData.length) return userNoData.value = true
    lastWeekData.values = data.weekData.slice(0, 10).map((item: any) => item = { ...item, ...item.song })
    songURLStore.initPlayList(data.weekData.map((item: any) => item = { ...item, ...item.song }))
    localStorage.setItem("playList", JSON.stringify(data.weekData.map((item: any) => item = { ...item, ...item.song })))
  }).catch(err => { noAuthority2.value = -2 })
}

onMounted(() => {
  requestUserSongListFn()
  requestLastWeekSongListFn()
})
</script>

<template>
  <div class="createSongListWrap">
    <div class="noSongList" v-if="noAuthority">用户暂无创建的歌单</div>
    <div class="listWrap" v-else-if="userListenCount.values.length !== 0">
      <div class="bigChartModelWrap" v-if="state === 0">
        <div class="zeroWrap" v-if="userListenCount.values.length">
          <div class="songItem">
            <router-link :to="{ path: '/ListenMusicHistory', query: { id: userIDs } }">
              <div class="imgWrap">
                <img class="itemBkImg" src="../../../assets/tops.png" alt="" />
                <div class="playBtn">
                  <img src="../../../assets/playimg.png" alt="">
                </div>
              </div>
            </router-link>
            <p class="songListDesc">听歌排行</p>
            <p class="songListDesc">累计听歌{{ listenCount }}首</p>
          </div>
          <createSongListItem
            v-for="item in userListenCount.values"
            :id="item.id"
            :picUrl="item.coverImgUrl"
            :name="item.name" :trackCount="item.trackCount"
          />
        </div>
        <div class="zeroWrap" v-else>
          <playListIntroduceSkeleton v-for="item in 10" />
        </div>
      </div>
      <div class="ListModel" v-else-if="state === 1">
        <div class="NewListModel" v-if="userListenCount.values.length">
          <div class="listModeItem">
            <div class="leftWrap">
              <div class="imgWraps">
                <RouterLink :to="{ path: '/ListenMusicHistory', query: { id: userIDs } }">
                  <img src="../../../assets/tops.png" alt="">
                </RouterLink>
              </div>
              <p class="songText">听歌排行</p>
            </div>
            <div class="rightWrap">累计听歌{{ listenCount }}首</div>
          </div>
          <ListModelItem
            v-for="item in userListenCount.values"
            :id="item.id" :picUrl="item.coverImgUrl"
            :name="item.name"
            :trackCount="item.trackCount" :playCount="item.playCount"
            :subscribedCount="item.subscribedCount"
            :creator="item.creator?.nickname" :userId="item?.creator?.userId"
          />
        </div>
        <AlibumListSkeleton v-else v-for="item in 10" />
      </div>
      <div class="legend" v-else>
        <div class="newLegend" v-if="userListenCount.values.length">
          <div class="legendItem">
            <div class="leftWrapImg">
              <RouterLink :to="{ path: '/ListenMusicHistory', query: { id: userIDs } }">
                <img src="../../../assets/tops.png" alt="">
              </RouterLink>
            </div>
            <div class="rightWrapList">
              <p class="listenMusicTop">听歌排行</p>
              <legendItemList :songData="lastWeekData.values" />
              <div class="viewMore">累计听歌{{ listenCount }}首</div>
            </div>
          </div>
          <legendItems v-for="item in userListenCount.values" :id="item.id" :name="item.name"
           :picUrl="item.coverImgUrl" />
        </div>
        <LegendItemSkeleton v-else v-for="item in 6" />
      </div>
    </div>
    <div v-else class="bigChartModel">
      <playListIntroduceSkeleton v-for="item in 10" />
    </div>
  </div>

</template>

<style lang="scss" scoped>
.createSongListWrap {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .listWrap {
    width: 100%;
    padding-bottom: 100px;

    .bigChartModelWrap {
      width: 100%;
      padding-left: 25px;
      box-sizing: border-box;

      .zeroWrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        // 歌单的每一项
        .songItem {
          position: relative;
          width: 18%;
          margin-right: 15px;

          .imgWrap {
            position: relative;
            overflow: hidden;
            background-color: rgb(48, 48, 46);
            border-radius: 4px;


            .itemBkImg {
              width: 100%;
              height: 100%;
              max-height: 211px;
              border-radius: $borderRadius8;
              transform: scale(0.7);
            }

            .playBtn {
              display: inline-block;
              opacity: 0;
              position: absolute;
              right: 8px;
              bottom: 12px;
              width: 30px;
              height: 30px;
              background-color: $theme-white;
              border-radius: 50%;
              transition: 1s;

              img {
                position: absolute;
                top: 1px;
                right: 0;
                bottom: 0;
                left: 3px;
                margin: auto;
                width: 24px;
                height: 24px;
              }
            }

            &:hover .topInfomation {
              transform: translateY(0%);
            }

            &:hover .playBtn {
              opacity: 1;
            }
          }

          .songListDesc {
            font-family: $textFont;
            font-size: $font-size-sm;
            line-height: 20px;
          }
        }
      }
    }

    .ListModel {
      width: 100%;

      .listModeItem {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;

        .leftWrap {
          display: flex;
          align-items: center;
          width: 50%;
          height: 100%;
          padding-left: 25px;
          box-sizing: border-box;

          .imgWraps {
            position: relative;
            width: 65px;
            height: 65px;
            border-radius: 8px;
            background-color: #000;

            img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              margin: auto;
              width: 60%;
              height: 60%;
            }
          }

          .songText {
            margin-left: 10px;
            font-size: $font-size-sm;
            font-family: $textFont;
            color: $font_main_color;
          }
        }

        .rightWrap {
          flex: 1;
          display: flex;
          align-items: center;
          font-size: $font-size-xs;
          color: $font_second_color;
        }

        &:nth-child(odd) {
          background-color: rgb(250, 250, 250);
        }

        &:hover {
          background-color: rgb(241, 242, 243);
        }
      }
    }

    .legend {
      width: 100%;

      .newLegend {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .legendItem {
          display: flex;
          width: 100%;
          margin-top: 30px;

          .leftWrapImg {
            position: relative;
            width: 180px;
            height: 180px;
            margin-left: 25px;
            border-radius: 6px;
            overflow: hidden;
            background-color: #99a9bf;

            img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              margin: auto;
              width: 60%;
              height: 60%;
            }
          }

          .rightWrapList {
            flex: 1;
            margin-left: 60px;

            .listenMusicTop {
              font-size: $font-size-md;
              font-family: $activeTextFont;
            }

            .viewMore {
              width: 100%;
              margin-right: 10px;
              line-height: 30px;
              text-align: right;
              padding-right: 30px;
              box-sizing: border-box;
              font-size: $font-size-xs;
              font-family: $activeTextFont;
              color: $font_second_color;
            }
          }
        }
      }
    }
  }

  .bigChartModel {
    width: 100%;
    display: flex;
    padding-left: 26px;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
}

.noSongList {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  font-family: $activeTextFont;
  font-size: $font-size-lg2;
}

:deep(.el-skeleton) {
  margin: 0 15px 0 0;
}

.imgWrap {
  background-color: red;
}

// 歌单图片响应式设置
@media screen and (min-width: 1100px) {
  .imgWrap {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .imgWrap {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .imgWrap {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .imgWrap {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .imgWrap {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .imgWrap {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .imgWrap {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .imgWrap {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .imgWrap {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .imgWrap {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .imgWrap {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .imgWrap {
    height: 210px !important;
    background-color: red;
  }
}
</style>
